<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第三课 的第一个文件</title>
	</head>

	<body>
		<h1 align="center">CSS盒子模型</h1>
		<hr>
		<p>
			 盒子模型属性：内容宽高、内边距、边框、外边距
			 宽：width、高：height、内边距：padding、边框：border、外边距：margin
			<br>
		</p>

		<p>演示：</p>

		<a href="#" class="box">
			<div>这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容这是盒子的内容</div>
		</a>

		<style>
			.box {
				display: block;
				width: 100px;
				height: 100px;
				padding: 10px;
				
				/*padding-top: 10px;
				padding-right: 20px;
				padding-bottom: 30px;
				padding-left: 40px;*/

				/*padding: 10px 20px 30px 40px;*/
				/*padding: 10px 4px;*/
				/*padding: 10px 0 5px;*/

				margin: 20px;
				/*margin: 10px 20px 30px 40px;*/
				/*margin: 10px 4px;*/

				border: 15px solid #000;
				/*border-width: 10px;
				border-style: solid;
				border-color: red;*/
				/*border-top: 5px solid #ccc;*/
				/*border-right: 5px solid #ccc;*/
				/*border-bottom: 5px solid #ccc;*/
				/*border-left: 5px solid #ccc;*/
				/*border: 5px solid #ccc;*/
				/*border-top: none;*/

				/*background: #ccc url('../20161105_html/img/logo.png') 0 0 no-repeat;*/
				/*background-size: 100% 100%;*/
				background-color: #ccc;
				background-image: url('../20161105_html/img/logo.png');
				background-position: right bottom;
				background-repeat: no-repeat;
				background-size: 50% auto;



				/*overflow: scroll;*/
				/*overflow-x: scroll;*/
				overflow-y: scroll;

			}
			/*.box div {
				width: 300px;
				height: 500px;
				overflow: hidden;
			}*/
		</style>


	</body>
</html>